<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <select name="" id="province">
        <option value="">请选择</option>
    </select>

    <select name="" id="city">
        <option value=""></option>
    </select>
    <br>
    <label for="">你选择了:
        <span id="span1"></span><span id="span2"></span>
    </label>
   
    <script>
        var all=[
            {
                province:'广东省',
                code:1,
                city:[
                    '广州',
                    '深圳',
                    '佛山',
                    '中山',
                ]
            },
            {
                province:'广西省',
                code:2,
                city:[
                    '南宁',
                    '桂林',
                    '柳州',
                    '北海',
                ]
            },
            {
                province:'湖南省',
                code:3,
                city:[
                    '长沙',
                    '岳阳',
                    '湘潭',
                    '常德',
                ]
            },
            {
                province:'四川省',
                code:4,
                city:[
                    '成都',
                    '重庆',
                    '天津',
                    '绵阳',
                ]
            },

        ];
        var province=document.querySelector("#province")
        var city=document.querySelector("#city")
        var span1=document.querySelector('#span1')
        var span2=document.querySelector('#span2')
        for(var i in all)
        {
            var node=document.createElement("option")
            node.innerText=all[i].province
            node.value=all[i].code
            province.appendChild(node)
        }
        province.onchange=function()
        {
            var v=this.value
            var citys=[]
            for(var i in all)
            {
                
                if(all[i].code==v)
                {
                    span1.innerText=all[i].province
                    citys=all[i].city
                    break;
                }
            }
            city.innerHTML='' 
            for(var i in citys)
            {
                var node=document.createElement('option')
                node.innerText=citys[i]
                city.appendChild(node)
            }
            city.onchange=function()
            {
                span2.innerText=city.value+'市'
            }
        }
        
        
    </script>
    
    
</body>
</html>